<template>
	<div>
		<div class="search">
			<a-row :gutter="20">
				<a-col :span="6">
					<a-select ref="select" v-model:value="searchForm.maritalStatus" @focus="focus"
						@change="selectXZname" placeholder="请选择门店状态" style="width: 150px">
						<a-select-option v-for="item in storeStatusList" :value="item.id"
							:key="item.id">{{ item.name }}</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="6">
					<a-input placeholder="根据门店名称、类型、code模糊搜索"></a-input>
				</a-col>
				<a-col :span="4">
					<a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
				</a-col>
			</a-row>
		</div>

		<a-row style="margin-bottom: 20px">
			<a-col :span="4">
				<a-button type="primary" v-has="{ a: $route, b: 2 }" @click="add" class="d-a-center">新增商品</a-button>
			</a-col>
		</a-row>

		<a-table :columns="colums" :data-source="list" bordered :loading="loading" :pagination="pagination"
			@change="handleTableChange" :row-selection="rowSelection" :scroll="{ y: 540 }"
			:scrollToFirstRowOnChange="true">
			<template #contractPrice="{ record }">
				{{ record.contractPrice / 100 }}
			</template>
			<template #status="{ record }">
				{{ orderStatus(Number(record.maritalStatus)) }}
			</template>
			<template #operation="{ record }">
				<div>
					<a-button type="link" @click="look(record.id)" v-has="{ a: $route, b: 1 }">查看</a-button>
					<!--   <a-button
            type="link"
            @click="update(record.id)"
            v-has="{ a: $route, b: 2 }"
            >更新</a-button
          > -->
					<a-button type="link" @click="contact(record.groupName, record.id)"
						v-has="{ a: $route, b: 2 }">关联门店</a-button>
					<!-- <a-button
            type="link"
            @click="updateStatus(record.id)"
            v-has="{ a: $route, b: 2 }"
            >修改门店状态</a-button
          > -->
					<!--  <a-button
            type="link"
            danger
            @click="del(record.id)"
            style="margin-left: 10px"
            v-has="{ a: $route, b: 2 }"
            >下架</a-button
          > -->
				</div>
			</template>
		</a-table>
		<a-modal :visible="visible" :title="title" @cancel="closeModal('visible')" width="80%" okText="提交审核"
			:footer="null">
			<a-form :model="form" ref="formRef" :rules="rules" :label-col="labelCol">
				<a-row :gutter="20">
					<a-col :span="8">
						<a-form-item label="商品ID" name="groupId">
							<a-input placeholder="商品id，机构保证全局唯一" v-model:value="form.groupId"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="商品名称" name="groupName">
							<a-input placeholder="请输入商品名称" v-model:value="form.groupName"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="服务次数" name="goodsCount">
							<a-input placeholder="请输入服务次数" v-model:value="form.goodsCount"></a-input>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="20">
					<a-col :span="8">
						<a-form-item label="商品类目" name="categoryId">
							<a-select ref="select" v-model:value="form.categoryId" @focus="focus" placeholder="请选择商品类目">
								<a-select-option v-for="item in classifyList" :value="item.id"
									:key="item.id">{{ item.name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="类目名称" name="backendCategoryId">
							<a-select ref="select" v-model:value="form.backendCategoryId" @focus="focus"
								placeholder="请选择类目名称">
								<a-select-option v-for="item in classifyNameList" :value="item.id"
									:key="item.id">{{ item.name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="佣金结算" name="finalProportion">
							<a-input placeholder="请输入佣金结算" v-model:value="form.finalProportion" suffix="%"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="20">
					<a-col :span="12">
						<a-form-item label="商品描述" name="goodsDesc">
							<a-textarea v-model:value="form.goodsDesc" placeholder="最多200个字，界面对应商品详情页描述"></a-textarea>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="目标人群" name="targetGroup">
							<a-textarea v-model:value="form.targetGroup" placeholder="最多256个字，界面对应列表文字"></a-textarea>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="20">
					<a-col :span="12">
						<a-form-item label="自营/平台" name="mode">
							<a-radio-group v-model:value="form.mode" name="radioGroup">
								<a-radio value="0">自营</a-radio>
								<a-radio value="1">平台</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="联调标签" name="label">
							<a-radio-group v-model:value="form.label">
								<a-radio value="B">联调中</a-radio>
								<a-radio value="C">联调后</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="20">
					<a-col :span="12">
						<a-form-item label="是否免费" name="free">
							<a-radio-group v-model:value="form.free">
								<a-radio :value="true">是</a-radio>
								<a-radio :value="false">否</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="线下支付" name="allowOfflinePay">
							<a-radio-group v-model:value="form.allowOfflinePay">
								<a-radio :value="true">是</a-radio>
								<a-radio :value="false">否</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>

				<a-table :columns="colums1" :data-source="itemList" bordered :loading="loading1" :scroll="{ y: 540 }"
					:scrollToFirstRowOnChange="true">
					<template #title>
						<a-row :gutter="20" justify="end">
							<a-col :span="4">
								<a-tag color="cyan">套餐列表</a-tag>
							</a-col>
							<a-col :span="4" :offset="16">
								<a-button type="primary" @click="addPackage" v-if="title != '查看商品'"
									class="d-a-center">新建套餐</a-button>
							</a-col>
						</a-row>
					</template>
					<template #operation="{ index }">
						<div>
							<a-button type="link" v-has="{ a: $route, b: 2 }" @click="lookItem(index)">编辑</a-button>
							<a-button type="link" v-has="{ a: $route, b: 2 }" danger
								@click="delItem(index)">删除</a-button>
						</div>
					</template>
				</a-table>
			</a-form>

			<!-- 底部按钮 -->
			<a-row v-if="title !== '查看商品'" style="margin-top: 15px">
				<a-col :span="4" :offset="8">
					<a-button type="info" @click="closeModal('visible')" class="d-a-center">关闭</a-button>
				</a-col>
				<a-col :span="4" :offset="1">
					<a-button type="primary" @click="submit" class="d-a-center">提交审核</a-button>
				</a-col>
			</a-row>
		</a-modal>

		<!-- 套餐列表弹窗 -->
		<a-modal width="60%" :visible="itemVisible" title="套餐" @ok="addNewItem" @cancel="closeModal('itemVisible')">
			<a-form :model="itemForm" ref="itemFormRef" :rules="itemFormRules" :label-col="labelCol">
				<a-row :gutter="20">
					<a-col :span="8">
						<a-form-item label="套餐ID" name="packageCode">
							<a-input placeholder="请输入套餐ID" v-model:value="itemForm.packageCode"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="套餐名称" name="packageName">
							<a-input placeholder="请输入套餐ID" v-model:value="itemForm.packageName"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="套餐类型" name="labels">
							<a-input-group>
								<a-auto-complete v-model:value="itemForm.labels" :options="typeList" style="width: 100%"
									@input="searchCity" placeholder="请选择套餐类型" />
							</a-input-group>
							<!-- <a-select
                ref="select"
                v-model:value="itemForm.labels"
                @change="selectXZname"
                placeholder="请选择套餐类型"
                style="width: 150px"
              >
                <a-select-option
                  v-for="item in typeList"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select> -->
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="20">
					<a-col :span="8">
						<a-form-item label="门市价(分）" name="markPrice">
							<a-input placeholder="门市价（单位分）" v-model:value="itemForm.markPrice"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="售卖价（分）" name="contractPrice">
							<a-input placeholder="售卖价(单位分)" v-model:value="itemForm.contractPrice"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="结算价（分）" name="settlementPrice">
							<a-input placeholder="结算价(低于售卖价)" v-model:value="itemForm.settlementPrice"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="20">
					<a-col :span="12">
						<a-form-item label="性别" name="gender">
							<a-radio-group v-model:value="itemForm.gender">
								<a-radio value="0">男</a-radio>
								<a-radio value="1">女</a-radio>
								<a-radio value="2">通用</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="婚姻" name="maritalStatus">
							<a-radio-group v-model:value="itemForm.maritalStatus">
								<a-radio value="0">未婚</a-radio>
								<a-radio value="1">已婚</a-radio>
								<a-radio value="2">通用</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="20">
					<a-col :span="8">
						<a-form-item label="套餐头图" name="detailImage">
							<a-upload v-model:file-list="detailImage" list-type="picture-card" class="avatar-uploader"
								:maxCount="1" :customRequest="uploadDetail_image">
								<div v-if="detailImage.length < 1" class="ant-upload-text">
									<plus-outlined />
								</div>
							</a-upload>
							尺寸2000*1500px 4：3
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="套餐列表" name="listImage">
							<a-upload v-model:file-list="listImage" list-type="picture-card" class="avatar-uploader"
								:maxCount="1" :customRequest="uploadList_image">
								<div v-if="listImage.length < 1" class="ant-upload-text">
									<plus-outlined />
								</div>
							</a-upload>
							尺寸2000*1500px 4：3
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="套餐详情" name="infoImage">
							<a-upload v-model:file-list="infoImage" list-type="picture-card" class="avatar-uploader"
								:maxCount="1" :customRequest="uploadInfo_image">
								<div v-if="infoImage.length < 1" class="ant-upload-text">
									<plus-outlined />
								</div>
							</a-upload>
							尺寸790*Xpx
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-item label="套餐介绍" name="packageDetail">
							<a-textarea v-model:value="itemForm.packageDetail" placeholder="请输入套餐介绍">
							</a-textarea>
						</a-form-item>
					</a-col>
				</a-row>
				<a-divider></a-divider>
				<a-row>
					<a-col :span="8">
						<a-button type="primary" size="small" @click="addMedicalList">增加体检项</a-button>
					</a-col>
				</a-row>
				<a-form>
					<div v-for="(item, index) in medicalList" :key="item">
						<a-row style="margin-top: 20px" :gutter="20">
							<a-col :span="10">
								<a-form-item label="标题">
									<a-input placeholder="体检项目标题" v-model:value="item.title"></a-input>
								</a-form-item>
							</a-col>
							<a-col :span="10">
								<a-form-item label="描述">
									<a-input placeholder="体检项目描述" v-model:value="item.detail"></a-input>
								</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-button type="link" danger @click="delMedicalItem(index)"
									class="d-a-center">删除</a-button>
							</a-col>
						</a-row>
					</div>
				</a-form>
			</a-form>
		</a-modal>

		<!-- 关联门店 -->
		<a-modal :visible="storeVisible" title="关联门店" @ok="associateStore" @cancel="closeModal('storeVisible')"
			okText="保存">
			<a-form :model="storeForm" ref="storeFormRef" :rules="rules1">
				<a-form-item label="商品名称"> {{ groupName }} </a-form-item>
				<a-form-item label="关联门店" name="name">
					<a-select ref="select" v-model:value="storeForm.name" @focus="focus" placeholder="请选择门店">
						<a-select-option v-for="item in storeList" :value="item.id"
							:key="item.id">{{ item.name }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script>
	import {
		reactive,
		createVNode,
		toRefs,
		computed
	} from "vue";
	import {
		message,
		Modal,
		modal
	} from "ant-design-vue";
	import {
		deleteObjBlank,
		toUnderLine
	} from "@/assets/js/common.js";
	import {
		getProductList,
		selectGoodDetailById,
		publishGoods,
		getStoreList,
	} from "@/api/service/index.js";
	import {
		ExclamationCircleOutlined,
		EditOutlined,
		PlusOutlined,
	} from "@ant-design/icons-vue";
	import {
		uploadPicture
	} from "@/api/service/index.js";
	import { useModal } from "@/hooks"
	export default {
		setup() {
			const data = reactive({
				loading: true,
				searchForm: {
					maritalStatus: "",
					groupName: "",
					contractPrice: "",
					id: "",
				},
				list: [],
				form: {
					free: false,
					allowOfflinePay: false,
					mode: "0",
					label: "B"
				},
				visible: false,
				packageList: [], //套餐列表
				itemList: [], //套餐项列表
				medicalList: [], //体检项列表
				itemVisible: false,
				itemForm: {}, //套餐项表单
				itemFormRef: "",
				// 关联门店列表
				storeVisible: false,
				formRef: "",
				isEditItem: false, //是否编辑item
				itemIndex: "",
				detailImage: [],
				listImage: [],
				infoImage: [],
				groupName: "", //商品名称
				title: "新增商品",
				storeList: [], //门店列表
				id: "", //商品ID
				storeFormRef: "", //门店表单ref
				storeForm: {},
			});
			// 分页器
			const page = reactive({
				current: 1,
				pageSize: 10,
				total: 0,
			});
			const rules = reactive({
				groupId: [{
					required: true,
					message: "请输入商品ID",
					trigger: "blur"
				}],
				groupName: [{
					required: true,
					message: "请输入商品名称",
					trigger: "blur"
				}, ],

				goodsCount: [{
						required: true,
						message: "请输入服务次数",
						trigger: "blur"
					},
					{
						pattern: /^[1-9]{1}\d{0,10}$/,
						message: "请输入大于0的整数"
					},
				],
				contractPrice: [{
					required: true,
					message: "请输入商品售卖价",
					trigger: "blur"
				}, ],
				categoryId: [{
					required: true,
					message: "请选择商品类目"
				}],
				backendCategoryId: [{
					required: true,
					message: "请选择类目ID"
				}],
				finalProportion: [{
						required: true,
						message: "请输入结算比例"
					},
					{
						pattern: /^(\d|[1-9]\d|100)(\.\d{1,2})?$/,
						message: "请输入0-100的数，最多保留两位小数",
					},
				],
			});
			const rules1 = reactive({
				name: [{
					required: true,
					message: "请选择关联门店"
				}],
			});
			const itemFormRules = reactive({
				packageName: [{
					required: true,
					message: "请输入套餐名称",
					trigger: "blur"
				}, ],
				packageCode: [{
					required: true,
					message: "请输入套餐ID",
					trigger: "blur"
				}, ],
				// gender: [{ required: true, message: "请选择性别" }],
				// maritalStatus: [{ required: true, message: "请选择婚姻" }],
				contractPrice: [{
					required: true,
					message: "请输入售卖价格",
					trigger: "blur"
				}, ],
				settlementPrice: [{
					required: true,
					message: "请输入结算价格",
					trigger: "blur"
				}, ],
				markPrice: [{
					required: true,
					message: "请输入市场价格",
					trigger: "blur"
				}, ],
				labels: [{
					required: true,
					message: "请选择套餐类型"
				}],
			});
			const storeStatusList = [{
					name: "已上架",
					id: "已上架",
				},
				{
					name: "未通过",
					id: "未通过",
				},
				{
					name: "已下架",
					id: "已下架",
				},
				{
					name: "审核中",
					id: "审核中",
				},
			];
			const classifyList = [{
					name: "体检",
					id: "1",
				},
				{
					name: "核酸",
					id: "2",
				},
				{
					name: "健康证",
					id: "4",
				},
			];
			const typeList = [{
					value: "小儿护理",
				},
				{
					value: "父母体检",
				},
				{
					value: "女性体检",
				},
				{
					value: "核酸检测",
				},
				{
					value: "上门换药",
				}, {
					value: "儿童体检",
				},
				{
					value: "青少年体检",
				},
				{
					value: "老年体检",
				},
				{
					value: "证件体检（含入职）",
				},
				{
					value: "体检加项/加项包",
				},
				{
					value: "上门检测",
				}, {
					value: "上门护理",
				}, {
					value: "上门体检",
				}, {
					value: "居家送检",
				}, {
					value: "居家自检",
				}, {
					value: "居家器械",
				}, {
					value: "居家快检",
				},
			];
			const classifyNameList = [{
					name: "儿童体检",
					id: "20210204000004",
				},
				{
					name: "中青年体检",
					id: "20210204000005",
				},
				{
					name: "老年体检",
					id: "20210204000006",
				},
				{
					name: "证件体检(含入职)",
					id: "20210204000007",
				},
				{
					name: "核酸检测(到店服务)",
					id: "20210204000008",
				},
				{
					name: "专科服务(不包含核酸检测)",
					id: "20210204000009",
				},
				{
					name: "上门检测",
					id: "202102040000010",
				},
				{
					name: "上门服务",
					id: "202102040000011",
				},
				{
					name: "上门体检",
					id: "202102040000012",
				},
			];
			const orderStatus = (status) => {
				let title = "";
				switch (status) {
					case 0:
						title = "待审核";
						break;
					case 1:
						title = "未通过";
						break;
					case 2:
						title = "已上架";
						break;
					case 3:
						title = "已下架";
						break;
					default:
						break;
				}
				return title;
			};

			const colums = [{
					title: "商品ID",
					dataIndex: "id",
					className: "table",
				},
				{
					title: "商品名称",
					dataIndex: "groupName",
					className: "table",
				},
				{
					title: "服务次数",
					dataIndex: "goodsCount",
					className: "table",
				},
				{
					title: "售卖价格",
					dataIndex: "contractPrice",
					className: "table",
					slots: {
						customRender: "contractPrice",
					},
				},

				{
					title: "门店状态",
					dataIndex: "maritalStatus",
					className: "table",
					slots: {
						customRender: "status",
					},
				},

				{
					title: "操作",
					dataIndex: "operation",
					className: "table",
					fixed: "right",
					// width: 150,
					// align: "center",
					slots: {
						customRender: "operation",
					},
				},
			];
			const colums1 = [{
					title: "套餐ID",
					dataIndex: "packageCode",
					className: "table",
				},
				{
					title: "套餐名称",
					dataIndex: "packageName",
					className: "table",
				},
				{
					title: "性别", // 0男 1女 2通用
					dataIndex: "gender",
					className: "table",
				},
				{
					title: "婚姻",
					dataIndex: "maritalStatus",
					className: "table",
				},
				{
					title: "操作",
					dataIndex: "operation",
					className: "table",
					fixed: "right",
					// width: 150,
					// align: "center",
					slots: {
						customRender: "operation",
					},
				},
			];

			const orderListStatusColor = computed((status) => {
				return function(status) {
					if (status == 0) {
						return "#f50";
					}
					if (status == 1) {
						return "success";
					}
					if (status == 2) {
						return "cyan";
					}
					if (status == 3) {
						return "warning";
					}
				};
			});
			// 分页器/-
			const pagination = computed(() => ({
				current: page.current,
				pageSize: page.pageSize,
				pageSizeOptions: ["10", "20", "30"],
				showTotal: (total, range) => {
					return "共" + total + "条";
				},
				total: page.total,
				showQuickJumper: true,
				showSizeChanger: true,
			}));
			// 分页器改变的时候
			const handleTableChange = (pagination, filters, sorter) => {
				// console.log(pagination, "当前分页");
				page.current = pagination.current;
				page.pageSize = pagination.pageSize;

				// 请求列表接口
				init();
			};
			const closeModal = (e) => {
				data[e] = false;
				if (e == "itemVisible") {
					data.itemForm = {};
				}
				if (e == "visible") {
					data.form = {};
					data.packageList = [];
					data.itemList = [];
				}
			};
			const openModal = (e) => {
				data[e] = true;
			};
			// 关联门店
			const contact = (name, id) => {
				data.groupName = name;
				data.id = id;
				openModal("storeVisible");
			};

			const addMedicalList = () => {
				data.medicalList.push({
					title: "",
					detail: "",
				});
			};
			// 修改门店状态
			const updateStatus = (e) => {};
			const delMedicalItem = (index) => {
				let ind = data.medicalList.findIndex((el, ind) => index == ind);
				data.medicalList.splice(ind, 1);
			};
			const add = () => {
				data.title = "新增商品";
				data.form.type = "publish";
				data.visible = true;
			};
			// 新增套餐
			const addPackage = () => {
				data.itemForm.gender = 2;
				data.itemForm.maritalStatus = 2;
				openModal("itemVisible");
			};
			// 增加套餐列表
			const addNewItem = () => {
				data.itemForm.itemList = data.medicalList; //体检项列表

				data.itemForm.detailImage = data.detailImage.length ?
					data.detailImage[0].url :
					"";
				data.itemForm.listImage = data.listImage.length ?
					data.listImage[0].url :
					"";
				data.itemForm.infoImage = data.infoImage.length ?
					data.infoImage[0].url :
					"";
				if (data.isEditItem) {
					data.itemList[data.itemIndex] = data.itemForm;
				} else {
					data.itemForm.key =
						data.itemForm.packageCode + Math.floor(Math.random() * 12) + 12;
					data.itemList.push(data.itemForm);
				}
				console.log(data.itemList, data.medicalList, " data.itemList");

				data.itemFormRef.validate().then(async () => {
					closeModal("itemVisible");
				});
			};
			// 查看套餐详情
			const lookItem = (index) => {
				let ind = data.itemList.findIndex((el, ind) => ind == index);
				let str = JSON.parse(JSON.stringify(data.itemList[ind]));
				data.itemForm = str;

				// 图片转一下
				if (str.detailImage) {
					data.detailImage[0].url = str.detailImage;
				}
				if (str.infoImage) {
					data.infoImage[0].url = str.infoImage;
				}
				if (str.listImage) {
					data.listImage[0].url = str.listImage;
				}

				data.isEditItem = true;
				data.itemIndex = index;
				openModal("itemVisible");
			};
			// 删除套餐详情
			const delItem = (index) => {
				const {closeModal} = useModal.confirm({
					title: "确定删除当前套餐吗?",
					icon: createVNode(ExclamationCircleOutlined),
					content: "删除后将不可恢复，请谨慎操作",
					async onOk() {
						data.itemList.splice(index, 1);
						closeModal()
					},
					onCancel() {
						message.info("取消删除");
						closeModal()
					},
				});
			};
			const look = (id) => {
				data.title = "查看商品";
				lookDetail(id);
				openModal("visible");
			};

			const update = (id) => {
				data.title = "更新商品";
				data.form.type = "update";
				lookDetail(id);
				openModal("visible");
			};

			// 上传头图
			const uploadDetail_image = (file) => {
				uploadImage(file, "detailImage");
			};
			const uploadInfo_image = (file) => {
				uploadImage(file, "infoImage");
			};
			const uploadList_image = (file) => {
				uploadImage(file, "listImage");
			};
			// 公共的上传图片
			const uploadImage = async (file, e) => {
				let formData = new FormData();
				formData.append("file", file.file);
				let res = await uploadPicture(formData, "ali");
				// // url存入列表中,为什么是两个fileList
				data[e] = data[e].filter((el) => el.status == "done");
				if (res.success) {
					data[e].push({
						uid: file.file.uid,
						url: res.object,
						status: "done",
						name: file.file.name,
					});
				}
				console.log(data[e], "data[e]是--");
			};
			const submit = () => {
				data.form.type = "publish";
				// data.form.reservationApiVersion = 1; // 后端说先不传
				data.form.packageList = data.itemList; //套餐列表
				console.log(data.form, "表单是");

				// 服务类型
				// data.form.serviceTypes = "DOOR_TO_DOOR_SERVICE";

				data.formRef.validate().then(async () => {
					let res = await publishGoods(data.form);
					if (res.success) {
						message.success("新增成功");
						closeModal("visible");
						init();
					}
				});
			};
			// 查看详情
			const lookDetail = async (id) => {
				let res = await selectGoodDetailById(id);
				if (res.success) {
					data.form = res.object;

					// // /* 转换为下划线、更新的时候再转回去吗？？？要死了简直 */
					// for (let key in res.object) {
					//   let underLineKey = toUnderLine(key);
					//   res.object[underLineKey] = res.object[key];
					// }
					console.log(res.object, "驼峰命名是");
				}
			};

			const search = () => {
				page.current = 1;
				init();
			};
			const associateStore = async () => {
				console.log(data.id, data.storeForm, "商品");
				data.storeFormRef.validate().then(() => {});
			};
			// 获取门店列表
			getALlStore();
			async function getALlStore() {
				let obj = {
					pageNum: 1,
					pageSize: 30,
					status: 1, //关联已上架的门店 状态1
				};
				let res = await getStoreList(obj);
				if (res.success) {
					data.storeList = res.object.list;
				}
			}

			init();
			async function init() {
				deleteObjBlank(data.searchForm);

				let obj = {
					pageNum: page.current,
					pageSize: page.pageSize,
					...data.searchForm,
				};
				// console.log(obj, "obj-----------");
				let res = await getProductList(obj);
				if (res.success) {
					res.object.list.map((el) => (el.key = el.id));
					data.list = res.object.list;
					page.total = res.object.total;
					data.loading = false;
				}
			}
			return {
				...toRefs(data),
				classifyList,
				colums,
				orderStatus,
				orderListStatusColor,
				pagination,
				closeModal,
				classifyNameList,
				add,
				rules,
				colums1,
				associateStore,
				storeStatusList,
				submit,
				labelCol: {
					style: {
						fontWeight: "bold"
					}
				},
				openModal,
				itemFormRules,
				addNewItem,
				lookItem,
				update,
				delItem,
				typeList,
				uploadDetail_image,
				uploadInfo_image,
				uploadList_image,
				addMedicalList,
				delMedicalItem,
				addPackage,
				handleTableChange,
				updateStatus,
				look,
				contact,
				search,
				rules1,
			};
		},

		components: {
			ExclamationCircleOutlined,
			EditOutlined,
			PlusOutlined,
		},
	};
</script>

<style scoped>
	.search {
		margin-bottom: 20px;
	}
</style>